<template>
    <section class="server_register_form overflowYAll">
        <!-- <p class="title"><span @click="goBack"><i class="el-icon-back"></i>服务资源注册</span></p> -->
    	<el-form ref="form" :model="form" :rules="rules"  label-width="106px"  v-loading="loading" >
            <span class="block">基本信息</span>	
            <el-form-item label="资源名称" prop="name" reuqired>
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="资源标识">
                <span>由系统自动生成</span>
            </el-form-item>
           
            <el-form-item label="服务方名称" prop="producerId"  reuqired >
                <el-select v-model="form.producerId" filterable placeholder="请选择(可直接搜索)">
                    <el-option v-for="(item,index) in fuwuName" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="服务类型" prop="type" reuqired>
                <el-radio-group v-model="form.type">
                    <el-radio :label="1" @change="fuwuTypeFileButton=false" >标准服务</el-radio>
                    <el-radio :label="2" @change="fuwuTypeFileButton=true">个性化服务</el-radio>
                </el-radio-group>
                <input type="file" name="fuwuTypeFile" id="fuwuTypeFile" value="" style="display: none;"/>
                <el-upload
                    v-show="fuwuTypeFileButton"
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <!--业务类型，信息类型多选-->
            <yw-info-desc-form 
                :yewuType="yewuType"
                :infoType="infoType"
                :timeSubmit="ywInfoDescTimeSubmit"
                @outPutForm = "ywInfoDescOutPutForm"
             ></yw-info-desc-form>
<!--*******************************数据来源************************************************************************-->				
            <p class="dashed"></p>
			<span class="block">资源信息</span>	
			 <el-form-item label="资源所在网段" prop="segmentId" reuqired>
                <el-radio-group v-model="form.segmentId" @change ="chooseResource" >
                    <el-radio v-for="(item,index) in resocureRadio" :label="item.id" :value="item">{{item.name}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="数据来源" prop="dataOrigin" reuqired>
                <el-radio-group v-model="form.dataOrigin" @change="change">
                    <el-radio-button class="box-radio" label="jiekou">接口</el-radio-button>
                    <el-radio-button class="box-radio" label="wenjian">文件</el-radio-button>
                    <el-radio-button class="box-radio"  label="datadb">数据库</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <!--接口的form-->
            <jiekou-form :timeSubmit="jiekouTimeSubmit" 
                :resourceWeb= "resourceWeb"
                @outPutForm = "jiekouOutPutForm" 
                v-show="secondForm==='jiekou'">
            </jiekou-form>
            <!--文件的form-->
            <wenjian-form  :timeSubmit="wenjianTimeSubmit" 
                :resourceWeb= "resourceWeb"
                @outPutForm = "wenjianOutPutForm" 
                v-show="secondForm==='wenjian'">
            </wenjian-form>
            <!--数据库的form-->
            <datadb-form :timeSubmit="datadbTimeSubmit"
                :resourceWeb= "resourceWeb"
                @outPutForm = "datadbOutPutForm" 
                v-show="secondForm==='datadb'">
            </datadb-form>
<!--************************************通用策略*******************************************************************-->			
            <p class="dashed"></p>
            <span class="block">通用策略</span>			
            <special-cenue :timeSubmit="tongyongTimeSubmit"  @outPutForm = "tongyongOutPutForm"></special-cenue>
            <p class="dashed"></p>
            <span class="block">发布信息</span>		
            <el-form-item label="可发布区域" prop="nodeIds" reuqired>
                <el-checkbox-group v-model="form.nodeIds" @change="fabuAreaChange">
                    <el-checkbox  v-for="(item,index) in fabuAreaRadio" :label="item.id" :name = "item.name">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <three-bing></three-bing>
            <p class="dashed"></p>
            <!-- <span class="block">其他</span>	 -->
            <!--<el-form-item label="调用文档">
            <el-input type="textarea" placeholder="100字以内"v-model="form.wendang"></el-input>
            <el-button type="primary" style="margin-top: 15px;" @click="uploadFuJian">上传附件</el-button>
            <input type="file" name="wendang_file" id="wendang_file" value="" style="display: none;" />
            </el-form-item>-->
            <p class="fixed_button">
                <el-button type="primary" @click="goBack" >取消</el-button>
                <el-button type="primary" @click = "submit('form')" >确定</el-button>
            </p>
		</el-form>
    </section>
</template>

<script>
	import specialCenue from "../common/specialCenue"
    import jiekouForm from "./components/jiekouForm"
    import wenjianForm from "./components/wenjianForm"
    import datadbForm from "./components/datadbForm"
    import echatsBing from "../common/echats_bing"
    import threeBing from "../common/threeBing"
    import ywInfoDescForm from "../common/yw_info_desc"
    import {
    	componentSearchName,
    	componentServerRegister,
    	componentServerRegisterGetFabuArea,
    	computedCheckName
    } from "../common/js_css_img/serverResourceComputed"
    import {
    	everyMonthCheckBoxJson,
    	everyWeekCheckBoxJson,
    	jiekouFormTableLabelJson
    } from "../common/js_css_img/jsonDiy"
    export default {
    	props:{
    		treeSeach:Object
    	},
    	components:{
    		ywInfoDescForm,
    		jiekouForm,
    		wenjianForm,
    		datadbForm,
    		echatsBing,
    		threeBing,
    		specialCenue
    	},
        data(){
          var checkName = (rule,value,callback)=>{
	          	if (!value) {
		          return callback(new Error('名字不能为空'));
		        }
	          	computedCheckName(this,value,'','zyzc');
	          	setTimeout(()=>{
		          if(this.has){
		            return callback(new Error('名称已存在，请重新输入'));
		          }else {
		            callback();  //必须要有回调，要不然表单无法提交
		          }
		      },1500)
          };
          return {
          		has:false,
          		loading:false,
          		fileList:[],/*上传的文件*/
          		resourceWeb:0,/*选中的资源网段*/
          		datadbTimeSubmit :false,/*数据库字段*/
          		jiekouTimeSubmit:false,/*接口form*/
          		wenjianTimeSubmit:false,/*文件form的form值*/
          		ywInfoDescTimeSubmit:false,/*业务类型，信息类型，描述form的值*/
          		tongyongTimeSubmit:false,/*通用策略传form的值*/
          		hasChooseFabuAreaRadio:'',
          		everyMonthVisible:false,
          		everyMonth:[],/*多选，选择日*/
          		secondForm:'',/*第二个表单*/
          		fuwuTypeFileButton:false,
          		form:{
          			name:'',
          			producerId:'',
          			businessType:[],
          			infoType:[],
          			nodeIds:[],
          			type: 1,
          			segmentId:'',
          			describe:'',
          			accessTactics:{},
                    dataOrigin:'',  //数据来源
					inServiceDataSource:{/*输入*/
					},
					outServiceDataSourceList:[/*输出*/
					]
          		},
          		jiekouFormTableData:[
          			{
          				canshuName :'参数名',
	          			chineseName:"中文名",
	          			yuanData:'对应的元数据',
	          			ishas:"是否必填",
	          			ischeck:"是否校验",
          			}
          		],
          		jiekouFormTableLabel:jiekouFormTableLabelJson,
          		fuwuName:[],
          		yewuType:[],
          		infoType:[],
          		everyWeekCheckBox:everyWeekCheckBoxJson,
          		everyMonthCheckBox:everyMonthCheckBoxJson,
          		resocureRadio:[],/*网段信息*/
          		fabuAreaRadio:[],
                rules: {
                    name: [
                        { required: true, message: '请输入资源名称', trigger: 'blur' },
                        { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' },
                        { validator: checkName, trigger: 'blur' }
                    ],
                    segmentId: [
                        { required: true, message: '请选择资源所在网段', trigger: 'blur' },
                    ],
                    producerId: [
                        { required: true, message: '请选择服务方名称', trigger: 'blur' },
                    ],
                    type: [
                        { required: true, message: '请选择服务类型', trigger: 'blur' },
                    ],
                    dataOrigin: [
                        { required: true, message: '请选择数据来源', trigger: 'blur' },
                    ],
                    nodeIds: [
                        { required: true, message: '请选择可发布区域', trigger: 'blur' },
                    ],
                },
          };
        },
        methods: {
    		/*上传相关操作*/
    	    handleRemove(file, fileList) {
		        console.log(file, fileList);
		    },
		    handlePreview(file) {
		        console.log(file);
		    },
		    handleExceed(files, fileList) {
		        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		    },
		    beforeRemove(file, fileList) {
		        return this.$confirm(`确定移除 ${ file.name }？`);
		    },
		    /*上传相关操作*/
    		upload(val){
    			document.getElementById(val).click();
    		},
    		change(val){
				this.secondForm = val;
    		},
    		chooseEveryMonth(){
    			console.log(this.form.everyMonth);
    			this.form.everyMonth = this.everyMonth;
    			this.everyMonthVisible=false;
    		},
    		uploadFuJian(){
    			document.getElementById("wendang_file").click();
    		},
    		fabuAreaChange(val){
    			console.log(val);
    		},
    		goBack(){
    			this.$emit('goBack');
                this.$refs.form.resetFields();
    		},
    		chooseResource(val){/*选中资源网段*/
    			console.log(val);
    			this.resourceWeb = val;
    			componentServerRegisterGetFabuArea(this,val)
    		},
    		submit(formName){/*这样一步一步地执行下去，真的很烦，没什么用*/
                //验证必要填写的信息
                if(this.has){
                	this.$message.error('名字重复了')
                	return false;
                }
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        this.loading=true;
                        this.tongyongTimeSubmit= !this.tongyongTimeSubmit;
                        console.log(this.form);
//                      this.$message({
//                          showClose: true,
//                          message: '成功注册',
//                          type: 'success'
//                      });
                       
                    }else{
                        this.$message({
                            showClose: true,
                            message: '请填写完必要信息',
                            type: 'error'
                        });
                        return false;
                    }
                });
    		},
    		tongyongOutPutForm(val){
    			console.log(val);
				if(val.flow===''&&val.frequency===''&&val.timeTpye===''){
					this.form.accessTactics =null;
				}else{
					this.form.accessTactics =val;
				}
    			this.ywInfoDescTimeSubmit= !this.ywInfoDescTimeSubmit;
    		},
    		ywInfoDescOutPutForm(val){
    			console.log(val);
    			this.form.businessType =val.businessType;
    			this.form.infoType =val.infoType;
    			this.form.describe =val.describe;
				switch (this.secondForm){
					case 'jiekou':
					this.jiekouTimeSubmit =!this.jiekouTimeSubmit
					break;
					case 'wenjian':
					this.wenjianTimeSubmit =!this.wenjianTimeSubmit
					break;
					case 'datadb':
					this.datadbTimeSubmit =!this.datadbTimeSubmit
					break;
					default:
					break;
				}
    		},
    		wenjianOutPutForm(val){
    			this.form.inServiceDataSource =val.inServiceDataSource;
    			this.form.outServiceDataSourceList =val.outServiceDataSourceList;
    			console.log(this.form);
    			componentServerRegister(this,this.form);/*提交整个表单*/
//  			this.loading=false;
    			 
    		},
    		jiekouOutPutForm(val){
    			console.log(val);
    			this.form.inServiceDataSource =val.inServiceDataSource;
    			this.form.outServiceDataSourceList =val.outServiceDataSourceList;
    			componentServerRegister(this,this.form);/*提交整个表单*/
//  			this.loading=false;
    			 
    		},
    		datadbOutPutForm(val){
    			console.log(val);
    			this.form.inServiceDataSource =val.inServiceDataSource;
    			this.form.outServiceDataSourceList =val.outServiceDataSourceList;
    			componentServerRegister(this,this.form);/*提交整个表单*/
//  			this.loading=false;
    			
    		},
            clearForm(){  //清空输入框信息
                this.form = {
                    name:'',
                    producerId:'',
                    businessType:[],
                    infoType:[],
                    nodeIds:[],
                    type:'',
                    segmentId:'',
                    describe:'',
                    accessTactics:{},
                    dataOrigin:'',  //数据来源
                    inServiceDataSource:{/*输入*/
                    },
                    outServiceDataSourceList:[/*输出*/
                    ]
                }
            },
        },
        mounted(){
			this.yewuType=this.treeSeach.business_type;
			this.infoType=this.treeSeach.info_type;
			this.resocureRadio = this.treeSeach.segment;
			componentSearchName(this,{pageAble:false,type:1});
            console.log(this.yewuType)
            console.log(this.infoType)
        },
        watch:{
        	treeSeach:{/*深度检测这个对象的变化*/
        		 handler(newVal, oldVal){
        		 	this.yewuType=this.treeSeach.business_type;
        			this.infoType=this.treeSeach.info_type;
        			this.resocureRadio = this.treeSeach.segment;
                    console.log(this.treeSeach);
            	},
            	deep:true
        	}
        }
  };
</script>

<style>
    .server_register_form .title{
    	height: 30px;
	    border-bottom: dashed 1px #afa4a4;
	    line-height: 20px;
	    font-size: 15px;
    }
    .server_register_form .title span{
    	cursor: pointer;
    	color: #5A8BFF;
    }
    .server_register_form .title .el-icon-back{
    	margin-right: 15px;
    }
    
    .server_register_form  .box_checkbox{
    	margin: 5px !important;
    }
    .server_register_form  .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
   .server_register_form  .el-checkbox-button.is-checked .el-checkbox-button__inner{
	   	color: #fff;
	    background-color: #409eff;
	    border-color: #409eff;
	    box-shadow: -1px 0 0 0 #8cc5ff;
   }
   .server_register_form  .block{
   	 font-size: 16px;
   	 margin-bottom: 10px;
    	display: inline-block;
    margin-top: 20px;
   }
    .server_register_form  .dashed{
        border-bottom: dashed 1px #afa4a4;
    }
    .server_register_form  .fixed_button{
    	position: fixed;
        bottom: 0px;
        background: #e0eefd80;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }
    .server_register_form  .box-radio .el-radio-button__inner{
    	border-radius: 60px;
    	margin: 0 10px;
    }
    .server_register_form .second_form{
    	background: #f5f5f5;
    	padding: 20px;
    }

    .server_register_form .block_radio{
    	display: block;
    	margin: 0 0 25px 0;
    }
    .server_register_form .everyDay{
    	position: absolute;
        top: 25px;
        left: 100px;
    }
    .server_register_form .everyWeek{
    	 position: absolute;
        top: 65px;
        left: 95px;
    }
    .server_register_form .everyMonth_span{
    	position: relative;
        border: 1px solid #dcdfe6;
        padding: 5px;
        margin: 0 5px;
    }
    .server_register_form .everyMonth_span .el-icon-circle-close-outline{
    	    position: absolute;
        top: -5px;
        right: -5px;
    }
    .server_register_form label.el-checkbox.everyMonth_checkbox{
    	width: 60px;
    	margin-left: 30px;
    }
    .server_register_form .everyMonth{
    	position: absolute;
        top: 115px;
        left: 100px;
    }
</style>